﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>设备实时状态</title>
    <link href="Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="Scripts/plugins/custom.css" rel="stylesheet" />
    <style type="text/css">
        .top_tiles{color:#ffffff;}
        .top_tiles .tile-stats{padding:5px;}
        .top_tiles h3{color:#ffffff;}

        .redfg{background: #ed6363;}
        .greedfg{background:#4ad56b;}
        
    </style>

</head>
<body class="nav-md" style="background: #dbe2e9;" ms-controller="adminindexpage">
    <div class="container body">
        <div class="main_container">
            <div class="right_col" role="main" style="margin: 0px;">
                <div class="row top_tiles" style="background-color: #FFFFFF; padding: 10px;margin-bottom: 10px;">
                    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12" ms-for="el in @ListData" >
                        <div class="tile-stats"  ms-css="{background:@ShowColor(el)}" >
                            <h3 ms-css="{background:@ShowColor(el)}" >{{el.LouNo}}{{el.LYNO}}楼</h3>
                            <div class="icon"><i class="fa iconfont icon-tuandui"></i></div>
                            <div class="count">{{el.Status=='0'?'通道故障':el.PathStatus}}</div>
                            <p class="clearfix" ><span class="iconfont icon-jinyizhou" ></span>报警通道：{{el.Status=='0'?'':el.PathName}}  </p>
                            <p class="clearfix" ><span class="iconfont icon-jinyizhou" ></span>检测时间：{{el.Status=='0'?'':el.FlagTime}}  </p>
                            <p class="clearfix" ><span class="iconfont icon-jinyiyue"  ></span>安装位置：{{el.Status=='0'?'':el.SetupAD}}</p>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.11.2.min.js"></script>
    <!-- Bootstrap -->
    <script src="Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="Scripts/avalon2.js"></script>
    <script src="Scripts/ComFunJS.js?bwver=201611280"></script>
    <script>
       
        var indexmodel = avalon.define({
            $id: "adminindexpage",
            ListData: [],
            red: { background: '#ff0000' },
            yellow: { background: '#ffd800' },
            green: { background: '#4ad56b' },
            ShowColor: function (el) {
                if (el.Status == '0') {
                    return '#ff0000';
                } else if (el.PathStatus == '通道故障') {
                    return '#ffd800';
                } else if (el.PathStatus == '正常') {
                    return '#4ad56b';
                } else {
                    return '#ff0000';
                }
            },
            GetListData: function () {
                $.getJSON(ComFunJS.APIURL("BASE_GETLAYERTS"), function (r) {
                    if (r.error == "") {
                        indexmodel.ListData = r.result;
                    }
                })
            }
        })
        avalon.ready(function () {
            indexmodel.GetListData();
            setInterval("indexmodel.GetListData()", 1000);
        })
    </script>
</body>
</html>
